<template>
  <div class="myo1">
    <Header />
    <div class="myo2">
      <myInfoVue />
      <div class="myO">
        <h3 class="myo3">我的观影记录</h3>
        <myHistoryVue />
      </div>
    </div>
  </div>
</template>
<script setup>
import Header from '@/components/Client/GlobalCom/mobile/HeaderMobile'
import myInfoVue from '@/components/Client/myOrderCom/mobile/myInfoMobile'
import myHistoryVue from '@/components/Client/myOrderCom/mobile/myHistoryMobile'
import { ref, onMounted, reactive } from 'vue'
import axios from 'axios'
import router from '@/router'
const tableData = ref([])
const tableAll = ref([])
const vals = ref('')
const user = reactive({ uid: '', username: '', phone: '', vid: '' })
const vip = ref('暂无会员')
const s1 = ref('font-size: large;color: white')
const total = ref(0)
onMounted(() => {
  if (document.documentElement.clientWidth > document.documentElement.clientHeight) {
    router.push('/myOrder')
  }
  if (JSON.parse(sessionStorage.getItem('uid')) === null) {
    alert('请先登录!')
    router.push('/Login')
  }
  user.vid = JSON.parse(sessionStorage.getItem('vid'))
  user.uid = JSON.parse(sessionStorage.getItem('uid'))
  user.username = JSON.parse(sessionStorage.getItem('username'))
  user.phone = JSON.parse(sessionStorage.getItem('phone'))
  vals.value = require('@/assets/UserPic/' + JSON.parse(sessionStorage.getItem('headSrc')))

  if (user.vid !== 0) {
    axios.get('api/vip/isVip/' + user.vid).then((res) => {
      if (res.data === 'YES') {
        vip.value = '超级会员'
        s1.value = 'font-size: large;color: red'
      } else {
        vip.value = '已过期'
      }
    })
  }
  axios.get('api/order/getOrderHistory/' + user.uid).then((res) => {
    tableAll.value = res.data
    total.value = tableAll.value.length
    const len = tableAll.value.length > 5 ? 5 : tableAll.value.length
    for (let i = 0; i < len; i = i + 1) {
      tableData.value.push(tableAll.value[i])
    }
  })
})
</script>
<style lang="scss" scoped>
.myO {
  width: 100%;
  height: 420px;
  float: left;
  margin-left: 50px;
  margin-top: 50px;
  background-color: white;
}
.myo1 {
  background-image: linear-gradient(to right, #434343 0%, black 100%);
}
.myo2 {
  width: 100%;
  height: 480px;
  background-image: linear-gradient(to right, #434343 0%, black 100%);
}
.myo3 {
  color: orange;
  margin-left: -30%;
}
</style>
